<template>
	<view class="" >
		<view class="wraps">
			<view v-if="cardinfo" class="lists">
				<view class="item">

					<view class="left">
						<view class="">
							名称：{{cardinfo.info && cardinfo.info.cardName || ''}}
							<!-- {{info}} -->
						</view>
						<view class="">
							卡号：{{cardinfo.info && cardinfo.info.cardNo || ''}}
						</view>
						<!-- <view class="">
							配送截止时间：2025-12-30
						</view> -->
						<view class="">
							已完成：{{cardinfo.finish}}
						</view>
					</view>
					<view class="right">
						<image class="img" :src="cardinfo.info && cardinfo.info.cardImg" mode=""></image>

					</view>
				</view>
			</view>

			<view  class="title1">
				{{info && info.plan && info.plan.planName}} 发货计划
				<div class="deco"></div>
			</view>



			<view class="addr">

				<view v-if="addrInfo" class="detailaddr">
					<view class="left">
						<image src="../../../static/aidex/images/addr.png" mode=""></image>
						<view class="" @click="chioceAddr">
							<!-- 请填写收货信息 -->
							<view class="">
								{{addrInfo.realname}} {{addrInfo.tell}}
							</view>
							<view class="">
								{{addrInfo.province}}
								{{addrInfo.city}}
								{{addrInfo.area}}
								{{addrInfo.address}}
							</view>


						</view>
					</view>
					<u-icon name="arrow-right" color="#005850" size="26"></u-icon>
				</view>


			</view>

			<view v-if="info" class="addr">

				<view class="detailaddr" style="justify-content: flex-start;">
					<view class="left" style="width: 90px !important; flex: auto;">
						发货产品
					</view>
					<view class="">
						{{ info && info.plan &&info.plan.goods}}
					</view>
				</view>


				<view class="detailaddr">
					<view class="left">
						发货时间
					</view>
					<view class="right" @click="show1=true">
						<div class="times">
							{{time?time:'选择发货日期'}}
						</div>
						<u-icon name="arrow-right" color="#005850" size="26"></u-icon>
					</view>
					<u-calendar :sendToday="minDate" :min-date="minDate" :max-date="maxDate" active-bg-color="#005850" @change="gettime"
						v-model="show1" mode="date"></u-calendar>
					
				</view>

				<view class="detailaddr">
					<view class="left">
						发货数量
					</view>
					<view class="">
						{{info && info.plan && info.plan.fahuoCount}}
					</view>

				</view>

				<div class="btngroup">
					<view class="btn1">
						<u-button v-if="cardinfo && cardinfo.info && cardinfo.info.planState=='已暂停'" @click="stop" plain class="sub1" type="primary"
							shape="circle" :ripple="true" ripple-bg-color="#909399">
							开启</u-button>
						<u-button v-else @click="open" plain class="sub1" type="primary" shape="circle" :ripple="true"
							ripple-bg-color="#909399">
							暂停</u-button>
					</view>

					<view class="btn2">
						<u-button @click="creat" class="sub" type="primary" shape="circle" :ripple="true"
							ripple-bg-color="#909399">
							保存计划</u-button>
					</view>
				</div>

			</view>
		</view>
		<view class="tips">
			<view class="tit">
				温馨说明：
			</view>
			<view class="detail">
				<view class="">
					1、为保证产品品质和时效，提货卡单次提货数量不宜过多
				</view>
				<view class="">2、配置好提货规则后，系统会按您选择的规则创建发货计划</view>
				<view class="">3、创建发货计划后，您可根据实际需要再次调整发货计划</view>
				<view class="">4、更多可咨询客服，服务时间：周一到周日（9:00-22:00）</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				minDate: '',
				maxDate: '',
				show1: false,
				zhouqi: '',
				time: "",
				mintime:'',

				show: false,
				addr: null,
				info: {},
				planId: '',
				topInfo: null,
				addrInfo: null,
				addressId: '',
				cardinfo: null,
				actionSheetList: [

				],
				curcardId: ''
			}
		},
		onLoad(e) {
			this.minDate = this.getCurrentDate()
			this.maxDate = this.getDateAfter20Years()
			this.curcardId = e.cardId
			console.log(this.topInfo, 5555);
			this.planId = e?.planId;
			this.getInfo()
			this.getcardInfo(e.cardId)



		},
		onShow() {

			this.addrInfo = this.vuex_checkedAddr;
			this.addressId = this.vuex_checkedAddr?.id;
		},
		methods: {
			getDateAfter20Years() {
				let currentDate = new Date();

				// 获取当前年份并加上20年
				currentDate.setFullYear(currentDate.getFullYear() + 20);

				// 获取新的年份、月份和日期
				let year = currentDate.getFullYear();
				let month = currentDate.getMonth() + 1; // 月份从0开始，所以加1
				let day = currentDate.getDate();

				// 格式化日期为 "YYYY-MM-DD"
				return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
			},

			getCurrentDate() {

				let currentDate = new Date();

				// 获取当前日期的后一天
				currentDate.setDate(currentDate.getDate() + 1);

				// 获取新的年份、月份和日期
				let year = currentDate.getFullYear();
				let month = currentDate.getMonth() + 1; // 月份从0开始，所以加1
				let day = currentDate.getDate();

				// 格式化日期为 "YYYY-MM-DD"
				return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
			},

			getcardInfo(cardId) {
				this.$u.api
					.cardInfo({
						cardId
					})
					.then((res1) => {
						console.log(res1, '*****&&');
						this.cardinfo = res1

					});
			},
			getInfo() {
				this.$u.api.planDetail({
						planId: this.planId
					})
					.then((res) => {

						if (res.code == 0) {
							console.log(res, 8888);
							this.info = res
							this.addrInfo = res?.address;
							this.addressId = res?.address?.id;
							
							this.minDate =  dayjs(res?.plan?.fahuoTime).add(1, 'day').format('YYYY-MM-DD');
							
							console.log(this.minDate ,5555);

						} else {
							this.$u.toast(res.msg); // 通知验证码组件内部开始倒计时
							console.log("请求数据失败");
						}
					});
			},
			stop(flag) {
				this.$u.api.startOrStopFahuo({
						cardId: this.curcardId
					})
					.then((res) => {
						
						if(res.code==0){
							if(flag=='stop'){
								uni.showToast({
									icon:'success',
									title:'暂停成功'
								})
								// this.$u.toast('暂停成功');
							}else{
								uni.showToast({
									icon:'success',
									title:'恢复成功'
								})
								// this.$u.toast('开启成功');
							}
							
						}
						
						this.getcardInfo(this.curcardId)
					});
			},
			open() {
				this.stop('stop')
			},

			chioceAddr() {
				uni.navigateTo({
					url: "/pages/sys/msg/creatAddr?choice=" + true
				})
			},
			creat() {
				if (!this.addressId) {
					this.$u.toast('请选择收货地址');
					return
				}
				if (!this.time) {
					this.$u.toast('请选择发货时间');
					return
				}

				this.$u.api.updatePlan({
						"addressId": this.addressId, //选择的地址ID
						"fahuoTime": this.time + ' 00:00:00', //卡的ID
						"id": this.planId //每次发货数量  

					})
					.then((res) => {

						if (res.code == 0) {
							setTimeout(() => {
								uni.navigateBack()
							}, 500)

						} else {
							this.$u.toast(res.msg); // 通知验证码组件内部开始倒计时
							console.log("请求数据失败");
						}
					});



			},
			gettime(e) {
				this.time = e.result;
				console.log(e.result, 5555);
			},
			confirm(e) {

				this.zhouqi = e[0] + 1
			},
			getday() {
				this.show = true
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.value = this.actionSheetList[index].text;
			}
		}
	}
</script>

<style scoped>
	page {
		background: #005850;
		padding: 48rpx 35rpx;
	}
</style>

<style scoped lang="scss">
	.tips {
		padding: 27rpx 46rpx;

		.tit {
			font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
			font-weight: normal;
			font-size: 22rpx;
			color: #F7F8F3;
			line-height: 31rpx;
		}

		.detail {
			padding: 15rpx 0 21rpx;
			font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
			font-weight: normal;
			font-size: 22rpx;
			color: #F7F8F3;
			// line-height: 31rpx;
			text-align: justify;

			>view {
				margin-bottom: 8rpx;
			}
		}
	}

	.btngroup {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn1 {
			width: 219rpx;
			height: 88rpx;

			.sub {
				width: 100%;
				height: 88rpx;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 42rpx;
				background: #F7F8F3;
			}
		}

		.btn2 {
			width: 313rpx;
			height: 88rpx;

			.sub {
				width: 100%;
				height: 88rpx;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 42rpx;
			}
		}
	}

	.title1 {
		text-align: center;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: bold;
		font-size: 36rpx;
		color: #005850;
		margin-bottom: 20rpx;
		line-height: 1rpx;

		.deco {
			margin: 0 auto;
			width: 212rpx;
			height: 7rpx;
			background: rgba(211, 149, 102, 0.8);
			border-radius: 6rpx;
			margin-top: 6px;
		}
	}

	.wraps {
		background: #F7F8F3;
		border-radius: 27rpx;
		padding: 53rpx 58rpx 40rpx;
	}


	.addr {
		.tit {
			font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
			font-weight: normal;
			font-size: 30rpx;
			color: #024546;
			line-height: 42rpx;
			margin-bottom: 17rpx;
		}

		.detailaddr {
			margin-bottom: 17rpx;
			padding: 20rpx 34rpx;
			background: #FFFFFF;
			border-radius: 25rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				flex: 1;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 26rpx;
				color: #005850;
				line-height: 35rpx;
				text-align: left;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 22rpx;
				}

				>view {
					flex: 1;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.times {
					margin-right: 20rpx;
					background: #005850;
					border-radius: 12rpx;
					padding: 8rpx 13rpx;
					font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
					font-weight: normal;
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 35rpx;
				}
			}

			.day {
				min-width: 57rpx;
				height: 36rpx;
				border-radius: 12rpx;
				border: 1rpx solid #005850;
				margin: 0 5px;
				text-align: center;
			}
		}
	}

	.lists {

		.item {
			position: relative;
			height: 270rpx;
			background: url('../../../static/aidex/images/bg.png') no-repeat;
			background-size: cover;
			border-radius: 14rpx;
			margin-bottom: 41rpx;
			display: flex;
			justify-content: space-between;

			.status {
				position: absolute;
				right: 0;
				padding: 2rpx 10rpx 3rpx;
				background: #7F7F7F;
				border-radius: 18rpx 0rpx 0rpx 18rpx;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: bold;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 30rpx;
				top: 25rpx;
				z-index: 5;

				&.doing {
					background: #009585 !important;
				}

				&.over {
					background: #F59A23 !important;
				}
			}

			.left {
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 20rpx;
				color: #FFFFFF;
				padding: 155rpx 0 0 30rpx;
			}

			.right {
				padding-top: 51rpx;
				margin-right: 30rpx;

				.img {
					width: 212rpx;
					height: 187rpx;
				}

				.dz {
					font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
					font-weight: normal;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 27rpx;
					padding: 4rpx 22rpx;
					background: linear-gradient(270deg, #CB9A71 0%, #E6C9A2 100%);
					border-radius: 18rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>
